<template>
	<!-- 查询 -->
	<PageContainer>
		<div class="search-container">
			<n-form ref="formRef" inline :label-width="80" :model="formValue" size="small" label-placement="left"
				:show-feedback="false">
				<n-form-item label="字典名称" path="dict_name">
					<n-input v-model:value="formValue.name" placeholder="输入字典名称" />
				</n-form-item>
			</n-form>
		</div>
		<div class="flex container">
			<div class="flex-left">
				<div class="cr mb-5">
					<n-icon size="22" class="fr mb-5">
						<AddCircleOutline />
					</n-icon>
					<n-input v-model:value="pattern" placeholder="搜索" />
				</div>
				<div style="height: 100%;overflow: auto;">
					<n-tree :show-irrelevant-nodes="showIrrelevantNodes" :node-props="nodeProps" key-field="id" label-field="dict_class_name"
						:pattern="pattern" :data="treeData" block-line />
				</div>
			</div>
			<div class="flex-right ml-10">
				<BasicTable ref="basicTable" :title="'部门列表'" :columns="columns"
					:row-key="rowKey" :pagination="{show:false}" :tableData="tableData">
					<template v-slot:toolRight>
						<n-button type="primary" class="mr-10" size="tiny" @click="addOrEditDict(null,true)">新增</n-button>
					</template>
				</BasicTable>
			</div>
		</div>
		<AddOrUpdateDrawer ref="addOrUpdateDrawer" @refresh="search"></AddOrUpdateDrawer>
	</PageContainer>
</template>

<script setup lang="ts">
	import { reactive, ref, h, onMounted } from 'vue';
	import { BasicTable } from '@/components/Common/BasicTable';
	import AddOrUpdateDrawer from '@/views/system/dicts/components/AddOrUpdateDrawer.vue';
	import { getDictList, getDictClassList,delDict } from '@/api/system';
	import { NButton, useMessage, TreeOption } from 'naive-ui'
	import type { DataTableColumns } from 'naive-ui'
	import { RowData } from 'naive-ui/es/data-table/src/interface';
	import PageContainer from '@/components/Common/PageContainer/index.vue'
	import { AddCircleOutline} from '@vicons/ionicons5'
	const message = useMessage()
	const rowKey = (row : RowData) => row.id

	
	const pattern = ref('')
	const showIrrelevantNodes = ref(false)
	const formValue = reactive({
		name: '',
		age: '',
		phone: ''
	})

	const columns : DataTableColumns = reactive([
		{
			title: '字典名称',
			key: 'dict_name'
		},
		{
			title: '字典值',
			key: 'dict_code'
		},
		{
			title: '排序',
			key: 'sort'
		},
		{
			title: '操作',
			key: 'actions',
			render(row) {
				return [
					h(
						NButton,
						{
							size: 'tiny',
							type: 'primary',
							onClick: () => addOrEditDict(row, false)
						},
						{ default: () => '编辑' }
					),
					h(
						NButton,
						{
							size: 'tiny',
							class: 'ml-10',
							type: 'error',
							onClick: () => delDictFunc(row)
						},
						{ default: () => '删除' }
					)
				]
			}
		}
	])
	onMounted(() => {
		getTreeData()
	})
	const treeData : TreeOption[] = ref([])
	const treeClassId = ref<String>()
	function getTreeData() {
		getDictClassList().then(res => {
			treeData.value = res.data
			treeClassId.value= res.data[0].id
			search({class_id: res.data[0].id})
		})
	}
	function nodeProps({ option } : { option : TreeOption }){
		return {
			onClick() {
				treeClassId.value = option.id
				search({class_id: option.id})
			}
		}
	}
	
	const basicTable = ref(null)
	const params = {
		'depart_name': 'zh'
	}
	const tableData = ref<Array<Object>>([])
	function search(params = {}) {
		getDictList(params).then(res=>{
			console.log(res.data)
			tableData.value = res.data
		})
	}
	const departDrawer = ref(null)
	function deleteDictClass(row : RowData) {
		message.success('删除成功')
	}
	/**
	 * 添加字典分类
	 */
	function delDictFunc(row : RowData) {
		delDict({id:row.id}).then(res=>{
			message.success("删除成功")
			search({class_id: treeClassId.value})
		})
	}
	const addOrUpdateDrawer = ref(null)
	function addOrEditDict(row : RowData | null, flag : Boolean | null) {
		if(!row){
			let temp = Object.create(null)
			temp.class_id = treeClassId.value
			row = temp
		}
		addOrUpdateDrawer.value?.open(row, flag)
	}
</script>

<style lang="scss" scoped>
	@mixin bg-border {
		padding: 10px;
		background-color: #fff;
		border-radius: 5px;
	}

	.search-container {
		@include bg-border();
		margin-bottom: 10px;
	}

	.container {
		height: 100%;
		overflow: hidden;

		.flex-left {
			width: 200px;
			@include bg-border();
			display: flex;
			flex-direction: column;
		}

		.flex-right {
			flex: 1;
			@include bg-border()
		}
	}
</style>